<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/maps/modules/map.js"></script>
    <script src="http://code.highcharts.com/maps/modules/data.js"></script>
    <script src="http://code.highcharts.com/maps/modules/drilldown.js"></script>
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/228/zroo4bdf/cn-china-by-peng8.js"></script>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <script type="text/javascript">
    $(function() {

        Highcharts.setOptions({

            lang: {

                drillUpText: "返回 > {series.name}"

            }

        });

        //geojson核心数据

        var data = Highcharts.geojson(Highcharts.maps['countries/cn/custom/cn-all-china']),
            small = $('#container').width() < 400;

        $.each(data, function(i) {

            this.drilldown = this.properties['drill-key'];

            this.value = i;

        });

        //获取 point name

        function getPoint(e) {

            console.log(e.point.name);

        }

        //初始化地图

        $('#container').highcharts('Map', {



            chart: {

                events: {

                    drilldown: function(e) {



                        if (!e.seriesOptions) {

                            var chart = this;

                            /*   mapKey = 'countries/china/' + e.point.drilldown + '-all',

                              fail = setTimeout(function () {

                                    if (!Highcharts.maps[mapKey]) {

                                        chart.showLoading('<i class="icon-frown"></i> 加载失败 ' + e.point.name);

 

                                        fail = setTimeout(function () {

                                            chart.hideLoading();

                                        }, 1000);

                                    }

                                }, 10000);*/

                            var cname = e.point.properties["cn-name"]; //cname =获取到的 “cn-name”

                            chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); //加载中 

                            // 加载城市数据
                            var drilldownTargetName = e.point.drilldown.replace(/_/g,'')

                            $.ajax({

                                type: "GET",

                                url: "https://data.jianshukeji.com/jsonp?filename=geochina/" + drilldownTargetName + ".json",

                                contentType: "application/json; charset=utf-8",

                                dataType: 'jsonp',

                                crossDomain: true,

                                success: function(json) {

                                    data = Highcharts.geojson(json);



                                    $.each(data, function(i) {

                                        this.value = i; //随机值，进入省份以后城市的值

                                        this.events = {};

                                        this.events.click = getPoint;

                                    });

                                    chart.hideLoading();



                                    chart.addSeriesAsDrilldown(e.point, {

                                        name: e.point.name,

                                        data: data,

                                        dataLabels: {

                                            enabled: true,

                                            format: '{point.name}' //设置显示形式，这里显示的是 各省的城市数据

                                        }

                                    });

                                },

                                error: function(XMLHttpRequest, textStatus, errorThrown) {



                                }

                            });

                        }



                        this.setTitle(null, { text: cname }); //这显示 图右侧 省份名称，可以回退

                    },

                    drillup: function() {

                        this.setTitle(null, { text: '中国' }); //右侧 显示中国，进入省份则显示省份

                    }

                }

            },

            //标题

            title: {

                text: '中国地图'

            },



            subtitle: {

                text: '',

                floating: true,

                align: 'right',

                y: 50,

                style: {

                    fontSize: '16px'

                }

            },



            legend: small ? {} : {



                layout: 'vertical',

                align: 'right',

                verticalAlign: 'middle'

            },

            //tooltip:{

            //pointFormat:"{point.properties.cn-name}:{point.value}"

            //},

            //省市程度色彩设置

            colorAxis: {

                min: 0,

                stops: [

                    [0, '#EFEFFF'],

                    [0.5, Highcharts.getOptions().colors[0]],

                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.5).get()]

                ]

            },



            mapNavigation: {

                enabled: true,

                buttonOptions: {

                    verticalAlign: 'bottom'

                }

            },



            plotOptions: {

                map: {

                    states: {

                        hover: {

                            color: '#EEDD66'

                        }

                    }

                }

            },

            //默认状态下，地图图表均不显示数据标签。用户需要在数据列中启用才可以。这时，需要使用配置项enabled为true

            series: [{

                data: data,

                name: '',

                dataLabels: {

                    enabled: true,

                    format: '{point.properties.cn-name}' //设置显示形式，这里显示的是 各城市名称

                }

            }],



            drilldown: {

                activeDataLabelStyle: {

                    color: '#FFFFFF',

                    textDecoration: 'none',

                    textShadow: '0 0 10px #000000'

                },

                drillUpButton: {

                    relativeTo: 'spacingBox',

                    position: {

                        x: 0, //水平偏移距离

                        y: 60

                    }

                }

            }

        });

    });
    </script>
</head>

<body>
    <div id="main">
        <div id="container" style="height: 540px;"></div>
    </div>
</body>

</html>